<template>
	<AppHeader title="书籍详情" :banAnimate="true" :backgroundColor="'#ffffff'">
		<template #left>
			<img @click="onClickLeft" src="@/assets/images/icon-back-black.png" width="9" height="18" />
		</template>
	</AppHeader>
	<div class="detail-container">
		<div class="content-header van-hairline--bottom" v-if="bookDetail">
			<img :src="bookDetail.cover_full" />
			<div class="book-title">
				<h6>{{ bookDetail.productName }}</h6>
				<p>适用于：{{ bookDetail.gradeName }}</p>
			</div>
		</div>
		<div class="book-table">
			<div class="table-title">
				<div class="left-title">
					<div>内容目录</div>
					<div>
						<span>已更新{{ chapterList.length }}个章节</span>
						<span>/共{{ chaptertotal }}个章节</span>
					</div>
				</div>
				<img v-if="sort" class="right-title" src="../../assets/images/listening/sort-up.png"
					@click="handleClickSort" />
				<img v-else class="right-title" src="../../assets/images/listening/sort-down.png"
					@click="handleClickSort" />
			</div>
			<div class="table-content">
				<van-cell @click="handleClickUnit(i)" class="cell-padding" v-for="(i, d) in chapterList" :title="i.name"
					is-link />
			</div>
		</div>
	</div>
</template>

<script setup>
	import AppHeader from "@/components/AppHeader.vue";
	import {
		ref,
		onMounted
	} from "vue";
	import {
		getBookDetails,
		getBookChapterlist
	} from "@/api/listening";
	import {
		useRouter,
		useRoute
	} from "vue-router";
	const router = useRouter();
	const route = useRoute();

	//返回上一页
	const onClickLeft = () => {
		router.go(-1);
	};
	
	//跳转章节详情
	const handleClickUnit = (item) => {
		router.push({
			path: "/listening/chapter-detail",
			query: {
				id: item.id,
				pid: item.productId,
				title: item.name
			},
		});
	};
	//切换章节排序
	const handleClickSort = () => {
		sort.value = !sort.value;
		getChapterlist()
	};

	const bookDetail = ref(null); //书籍信息
	const chapterList = ref([]); //章节列表
	const chaptertotal = ref(); //章节总数
	const sort = ref(true); //排序方式 true升序 false 降序
 	//获取书籍详情
	const getBookInfo = async () => {
		getBookDetails({
			id: route.query.id
		}).then(res => {
			bookDetail.value = res.data;
			chaptertotal.value =JSON.parse(res.data.packageinfo.replace(/'/g, '"'))[1].content
		})
	};
	//获取书籍章节
	const getChapterlist = () => {
		getBookChapterlist({
			id: route.query.id,
			order:sort.value?'asc':'desc'
		}).then(res => {
			chapterList.value = res.data;
		})
	}

	onMounted(async () => {
		getBookInfo()
		getChapterlist()
	});
</script>

<style scoped lang="scss">
	.detail-container {
		padding-top: 46px;
		background-color: #ffffff;
		height: 100%;

		.content-header {
			padding: 20px 10px;
			display: flex;
			align-items: center;

			img {
				width: 70px;
				border-radius: 15px;
			}

			.book-title {
				margin-left: 15px;

				h6,
				p {
					margin: 0;
				}

				h6 {
					font-size: 16px;
					margin-bottom: 15px;
				}

				p {
					font-size: 14px;
					color: #8e8e8e;
				}
			}
		}

		.book-table {
			padding: 0 10px;

			.table-title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20px 0;

				.left-title {
					display: flex;
					align-items: center;

					&>div:nth-child(1) {
						color: #333333;
						font-size: 16px;
						font-weight: bold;
					}

					&>div:nth-child(2) {
						margin-left: 10px;
						font-size: 12px;

						&>span:nth-child(1) {
							color: #0cb76c;
						}

						&>span:nth-child(2) {
							color: #8e8e8e;
						}
					}
				}

				.right-title {
					width: 16px;
					height: 14px;

					&.sort {
						rotate: 180deg;
						transform: scaleX(-1);
					}
				}
			}

			.table-content {

				.cell-padding {
					padding-left: 0;
					padding-right: 0;
				}
			}
		}
	}
</style>